import { NAvatar, NDropdown, NIcon, NLayoutHeader, NSpace, NText } from 'naive-ui'
import { defineComponent } from 'vue'
import { LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@vicons/antd'
import styles from './Header.module.scss'
import { useAppStore } from '@/store/modules/app'
import logoPath from '@/assets/logo/logo.png'
import { useUserStore } from '@/store/modules/user'
import Tags from '../Tags'

const HeaderLeft = () => {
  const appStore = useAppStore()
  return (
    <div class="flex items-center">
      {appStore.menuShowTrigger && appStore.menuPosition === 'top' && (
        <div
          style={{ height: '26px' }}
          onClick={() => {
            appStore.menuTrigger = !appStore.menuTrigger
          }}
        >
          <NIcon class={['cursor-pointer']} size={26}>
            {appStore.menuTrigger ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </NIcon>
        </div>
      )}
      <Tags />
    </div>
  )
}
const HeaderRight = () => {
  const userStore = useUserStore()
  function userActionSelect(key: string) {
    if (key === 'logout') {
      userStore.logout()
    }
  }
  return (
    <NSpace align="center">
      <NDropdown
        options={[
          {
            label: '退出登录',
            key: 'logout',
            icon: () => (
              <NIcon>
                <LogoutOutlined />
              </NIcon>
            ),
          },
        ]}
        onSelect={userActionSelect}
      >
        <div class="flex items-center pr-3 cursor-pointer">
          <NAvatar objectFit="cover" size="medium" src={logoPath} round />
          <NText class="pl-1.5">Mr.An</NText>
        </div>
      </NDropdown>
    </NSpace>
  )
}

const Header = defineComponent(() => {
  return () => (
    <NLayoutHeader class={styles.header_wrap}>
      <div class="flex justify-between min-w-full items-center">
        <HeaderLeft class="flex-grow" />
        <HeaderRight />
      </div>
    </NLayoutHeader>
  )
})

export default Header
